import React from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeHighlight from 'rehype-highlight';
import hljs from 'highlight.js';
import './style/code.css';
import './style/markdownStyles.css';



const highlightCode = (node) => {
    if (node.tagName === 'pre') {
        const codeNode = node.children[0];
        if (codeNode.tagName === 'code') {
            const language = codeNode.properties.className?.[0]?.replace('language-', '');
            if (language && hljs.getLanguage(language)) {
                const highlightedCode = hljs.highlight(codeNode.children[0].value, { language }).value;
                codeNode.children[0].value = highlightedCode;
            }
        }
    }
    return node;
};

const ChatMessage = ({ message, role }) => {
    return role === 'user' ? (
        <div>{message}</div>
    ) : (
        <div className="chat-message">
            <ReactMarkdown
                remarkPlugins={[remarkGfm]}
                rehypePlugins={[rehypeHighlight, () => highlightCode]}
            >
                {message}
            </ReactMarkdown>
        </div>
    );
};

export default ChatMessage;
